<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Infinite Slider</title>
</head>   
<body>
    <main>
        <div class="slider" style="
            --width: 100px;
            --height: 50px;
            --quantity: 10;
        ">
            <div class="list">
                <div class="item" style="--position: 1"><img src="https://wallpapercave.com/uwp/uwp4520483.jpeg" alt=""></div>
                <div class="item" style="--position: 2"><img src="https://wallpapercave.com/uwp/uwp4514075.jpeg" alt=""></div>
                <div class="item" style="--position: 3"><img src="https://wallpapercave.com/uwp/uwp4513645.jpeg" alt=""></div>
                <div class="item" style="--position: 4"><img src="https://wallpapercave.com/uwp/uwp4513644.png" alt=""></div>
                <div class="item" style="--position: 5"><img src="https://wallpapercave.com/uwp/uwp4520481.jpeg" alt=""></div>
                <div class="item" style="--position: 6"><img src="https://wallpapercave.com/uwp/uwp4520483.jpeg" alt=""></div>
                <div class="item" style="--position: 7"><img src="https://wallpapercave.com/uwp/uwp4514075.jpeg" alt=""></div>
                <div class="item" style="--position: 8"><img src="https://wallpapercave.com/uwp/uwp4513645.jpeg" alt=""></div>
                <div class="item" style="--position: 9"><img src="https://wallpapercave.com/uwp/uwp4513644.png" alt=""></div>
                <div class="item" style="--position: 10"><img src="https://wallpapercave.com/uwp/uwp4520481.jpeg" alt=""></div>
            </div>
        </div>

        <div class="slider" reverse="true" style="
            --width: 200px;
            --height: 200px;
            --quantity: 9;
        ">
            <div class="list">
                <div class="item" style="--position: 1"><img src="https://wallpapercave.com/wp/wp3788210.jpg" alt=""></div>
                <div class="item" style="--position: 2"><img src="https://wallpapercave.com/wp/wp3788222.jpg" alt=""></div>
                <div class="item" style="--position: 3"><img src="https://wallpapercave.com/wp/wp2966843.jpg" alt=""></div>
                <div class="item" style="--position: 4"><img src="https://wallpapercave.com/wp/wp3648054.jpg" alt=""></div>
                <div class="item" style="--position: 5"><img src="https://wallpapercave.com/wp/wp3767375.jpg" alt=""></div>
                <div class="item" style="--position: 6"><img src="https://wallpapercave.com/wp/wp3788215.jpg" alt=""></div>
                <div class="item" style="--position: 7"><img src="https://wallpapercave.com/wp/wp2423529.jpg" alt=""></div>
                <div class="item" style="--position: 8"><img src="https://wallpapercave.com/wp/wp3788198.jpg" alt=""></div>
                <div class="item" style="--position: 9"><img src="https://wallpapercave.com/uwp/uwp4520478.jpeg" alt=""></div>
            </div>
        </div>
    </main>
    
</body>
</html>
